<template>
  <div class="material">
    <!-- <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="title">{{ staffTitle }}</span>
    </div> -->

    <!-- 选项卡 -->
    <div class="tab_control_box" v-if="subPage == 0">
      <div class="tab_control">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="用料计划" name="1">
            <MaterialPlan
              class="content_box"
              @editPlan="editPlanInfo"
              @delPlan="delPlanInfo"
              @planDetails="onPlanDetails"
              ref="planListRef">
            </MaterialPlan>
          </el-tab-pane>
          <el-tab-pane label="实时监控" name="2">
            <RealTimeMonitor ref="RealTimeMonitorRef"></RealTimeMonitor>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="button_box">
        <el-row>
          <el-button
            type="text"
            plain
            icon="el-icon-refresh"
            v-if="menuType == 0"
            @click="onRefreshClick"
          >刷新</el-button>
          <el-button
            type="text"
            plain
            icon="el-icon-circle-plus-outline"
            v-if="menuType == 0"
            @click="addPlanInfo"
          >添加用料计划</el-button>
        </el-row>
      </div>
    </div>

    <AddPlanInfoModel v-else-if="subPage == 1" ref="addPlanRef" />
    <PlanDetailsModel v-else-if="subPage == 2" ref="planDetailsRef"/>
  </div>
</template>

<script>
import MaterialPlan from "./MaterialPlan";
import AddPlanInfoModel from "../models/AddPlanInfoModel";
import PlanDetailsModel from "../models/PlanDetailsModel";
import HttpInterface from "../../util/httpInterface";
import RealTimeMonitor from "./RealTimeMonitor"

export default {
  name: "Material",
  components: {
    MaterialPlan,
    AddPlanInfoModel,
    PlanDetailsModel,
    RealTimeMonitor
  },
  data() {
    return {
      menuType: 0,
      activeName: "1",
      staffTitle: "物料管理",
      subPage: 0
    };
  },

  created () {
    this.resetPresentPage();
  },

  methods: {
    handleClick(tab) {
      if (Number(tab.index) == 0) {
        this.menuType = 0;
        this.$refs.planListRef.refresh();
      } else if (Number(tab.index) == 1) {
        this.menuType = 1;
        this.$refs.RealTimeMonitorRef.videoAutoplay();
      }
    },

    // 页面初始化
    resetPresentPage () {
      this.subPage = 0;
      this.staffTitle = "物料管理";
    },

    // 添加用料计划
    addPlanInfo () {
      var _this = this;
      this.subPage = 1;
      this.$nextTick(function () {
        _this.$refs.addPlanRef.refresh(0, function () {
          _this.subPage = 0;
        });
      });
      this.staffTitle = "添加用料计划";
    },

    //编辑计划信息
    editPlanInfo (id) {
      var _this = this;
      this.subPage = 1;
      this.$nextTick(function () {
        _this.$refs.addPlanRef.refresh(id, function () {
          _this.subPage = 0;
        });
      });
    },

    //删除计划
    delPlanInfo (id) {
      var _this = this;
      this.$confirm('删除当前用料计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          "id": id
        };
        HttpInterface.requestPost(this, HttpInterface.URL_MATERIAL_DEL, params, function (response) {
          var data = response.data;
          if (data.success) {
            _this.successMessage("删除成功！");
            _this.$refs.planListRef.getDutyuserList();
          }
        }, null, false);
      }).catch(() => {

      });
    },

    // 跳转到计划详情
    onPlanDetails (id) {
      var _this = this;
      this.subPage = 2;
      this.staffTitle = "用料计划详细信息";
      this.$nextTick(function () {
        _this.$refs.planDetailsRef.getPlanInfo(id, function () {
          _this.subPage = 0;
        });
      });
    },

    // 刷新数据
    onRefreshClick: function () {
      if (this.menuType == 0) {
        this.$refs.planListRef.refresh();
      } else if(this.menuType == 1){

      }
    }
  }
};
</script>
